<template>
	<view>
		<!-- 九宫格抽奖 -->
		<LuckyGrid ref="luckyGridRefs" width="600rpx" height="600rpx" :blocks="luckyGridBlock" :prizes="luckyGridPrizes"
			:buttons="luckyGridButton" :defaultConfig="defaultConfig" :defaultStyle="defaultStyle"
			:activeStyle="activeStyle" @start="startCallBack" @end="endCallBack"/>
	</view>
</template>

<script>
	import LuckyGrid from '@lucky-canvas/uni/lucky-grid' // 九宫格
	export default {
		components: {
			LuckyGrid
		},
		data() {
			return {
				luckyGridBlock: [{
						padding: "3px",
						background: "#92c53a",
						borderRadius: "8px"
					},
					{
						padding: "2px",
						background: "#bdd333",
						borderRadius: "8px"
					},
					{
						padding: "7px",
						background: "#ff0000",
						borderRadius: "8px"
					},
				],
				luckyGridPrizes: [{
					x: 0,
					y: 0,
					fonts: [{
						text: "谢谢参与",
						top: "68%",
						fontSize: "14"
					}],
					// imgs: [{
					// 	src: "",
					// 	width: "50%",
					// 	top: "12%"
					// }]
				}, {
					x: 1,
					y: 0,
					fonts: [{
						text: "1个积分",
						top: "68%",
						fontSize: "14"
					}],
					// imgs: [{
					// 	src: "",
					// 	width: "50%",
					// 	top: "12%"
					// }]
				}, {
					x: 2,
					y: 0,
					fonts: [{
						text: "5个积分",
						top: "68%",
						fontSize: "14"
					}],
					// imgs: [{
					// 	src: "",
					// 	width: "50%",
					// 	top: "12%"
					// }]
				}, {
					x: 2,
					y: 1,
					fonts: [{
						text: "10个积分",
						top: "68%",
						fontSize: "14"
					}],
					// imgs: [{
					// 	src: "",
					// 	width: "50%",
					// 	top: "12%"
					// }]
				}, {
					x: 2,
					y: 2,
					fonts: [{
						text: "谢谢参与",
						top: "68%",
						fontSize: "14"
					}],
					// imgs: [{
					// 	src: "",
					// 	width: "50%",
					// 	top: "12%"
					// }]
				}, {
					x: 1,
					y: 2,
					fonts: [{
						text: "1个积分",
						top: "68%",
						fontSize: "14"
					}],
					// imgs: [{
					// 	src: "",
					// 	width: "50%",
					// 	top: "12%"
					// }]
				}, {
					x: 0,
					y: 2,
					fonts: [{
						text: "5个积分",
						top: "68%",
						fontSize: "14"
					}],
					// imgs: [{
					// 	src: "",
					// 	width: "50%",
					// 	top: "12%"
					// }]
				}, {
					x: 0,
					y: 1,
					fonts: [{
						text: "10个积分",
						top: "68%",
						fontSize: "14"
					}],
					// imgs: [{
					// 	src: "",
					// 	width: "50%",
					// 	top: "12%"
					// }]
				}],
				luckyGridButton: [{
					x: 1,
					y: 1,
					shadow: "",
					fonts: [{
						text: "开始抽奖",
						top: "45%",
						fontSize: "14"
					}]
					// imgs: [{
					// 	src: "",
					// 	width: "100%",
					// 	height: "112%"
					// }]
				}],
				defaultConfig: {
					gutter: 8
				},
				defaultStyle: {
					background: "#00aaff",
					borderRadius: "13px",
					fontColor: "#ffffff",
					fontSize: "11px",
					shadow: "0 9 0.1 #5555ff"
				},
				activeStyle: {
					background: "#e9e967",
					shadow: "0 9 0.1 #E1E13B"
				}
			}
		},
		methods: {
			startCallBack: function() {
				var A = this;
				this.$refs.luckyGridRefs.play(),
					setTimeout((function() {
						A.$refs.luckyGridRefs.stop(8 * Math.random() >> 0)
					}), 3e3)
			},
			endCallBack: function(A) {
				console.log(A)
			}
		}
	}
</script>

<style>

</style>